<template>
    <div class="app-container">
        <div class="project-manage">
            <div class='main-top'>
                <el-form   label-width="90px" :inline="true" :model="formInline" class="form-style">
                    <el-form-item label="补货单号:">
                        <el-input v-model="formInline.goodsNum"  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="售货机编号:">
                        <el-input v-model="formInline.machineNum"  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="工控号:">
                        <el-input v-model="formInline.number" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item  label="司员编号:">
                      <el-input v-model="formInline.memberNum" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="search()" type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="reSet()" type="primary">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="main-table">
                <el-table v-loading='tableLoading' stripe  :data="tableList" height="550" border style="width: 100%">
                    <el-table-column align="center" prop="numbers" label="补货单号" > </el-table-column>
                    <el-table-column align="center" prop="number" label="售货机编号" > </el-table-column>
                    <el-table-column align="center" prop="controlNumber" label="工控编号" > </el-table-column>
                    <el-table-column align="center" prop="pointNumber" label="点位" > </el-table-column>
                    <el-table-column align="center" prop="jobNumber" label="配送人员编号" > </el-table-column>
                    <el-table-column align="center" prop="shouldRetrieveMoney" label="本次应取回现金数（元）" > </el-table-column>
                    <el-table-column align="center" prop="replenishmentTime" label="补货时间" > </el-table-column>
                </el-table>
                <div class="block">
					<el-pagination
					background
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="handleCurrentChange()"    
					>
					</el-pagination>
				</div>   
            </div>
        </div>
    </div>
</template>
<script>
import {gettableList} from '@/api/fillRecord'

export default {
    data() {
        return {
            tableList:[],
            formInline:{goodsNum:'',machineNum:'',number:'',memberNum:''},
            tableLoading:false,
            currentPage:1,
            totalPage:0,
            formLabelAlign:{name:'',creatTime:'',missTime:''},
            showArrange:''
        }
    },
    methods: {
        gettableList(current) {
            this.tableLoading = true
            let data= 
               {
                "controlNumber": this.formInline.number,
                "current": current || this.currentPage,
                "jobNumber": this.formInline.memberNum,
                "numbers": this.formInline.goodsNum,
                "size": 0,
                "vendorId": this.formInline.machineNum,
                }
            gettableList(data).then(res=>{
                console.log(res)
                this.tableList = res.data.data.records
                this.totalPage = res.data.data.total
                this.tableLoading = false
            })
        },
        reSet() {
            this.formInline = {number:'',memberNum:'',goodsNum:'',machineNum:''},
            this.gettableList()
        },
         search() {
            this.currentPage = 1
            this.gettableList()
        },
        handleCurrentChange(current) {
            this.gettableList(current)
        },
        arrangeMember() {
            this.showArrange = true
            this.showRevise = true
        },
        reviseMember() {
            this.showArrange = false
            this.showRevise = true
            
        }
        
    },
    created () {
        this.gettableList()
    }
  
}
</script>
<style rel="stylesheet/scss" lang="scss">
   @import "src/styles/mixin.scss";
    .project-manage{
        .main-top{
            padding: 32px 15px;
            padding-bottom: 20px;
            background-color: #FFF;
            .el-input{
                width: 150px ;
            }
            .el-button{
                padding: 11px 33px;
                margin-left: 5px;
            }
            .el-form-item{
                margin-right: 0px;
            }
        }
        .main-nav{
            @include navStyle
        }
        .addenp{
            .el-form-item{
            margin-bottom: 10px;
            }
            .el-dialog__body{
            padding: 30px 35px;
            padding-bottom: 0px;
            }
            .dialog-footer{
            padding:11px 50px 29px 0px;
            text-align: right;
            .el-button{
                padding: 10px 30px;
                border: none;
            }
            .cancel{
                color: #000;
                background: #E0E0E0;
                border-radius: 3px;
            }
            }
        }
        .block{
            text-align: center;
            margin-top: 15px;
        }
    }
</style>
